<template>
  <el-form :inline="true">
    <el-form-item v-for="item in filterItems" :key="item.id">
      <!-- <el-row :gutter="20"> -->
      <!-- <el-col
                :xs="24"
                :sm="6"
                :md="6"
                :lg="6"
                :xl="6"
                v-for="item in filterItems"
                :key="item.id"
                > -->
      <div
        class="filter"
        :style="{ width: item.width ? `${item.width}px` : 'auto' }"
      >
        <span>{{ item.title }}:</span>
        <el-input
          clearable
          v-if="item.type === 'input'"
          v-model="filterParam[item.id]"
          :placeholder="item.placeholder || '请输入内容'"
          @keyup.enter.native="searchData"
        ></el-input>
        <el-select
          v-if="item.type === 'select'"
          v-model="filterParam[item.id]"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="option in selectObj[item.id]"
            :key="option.key"
            :label="option.title"
            :value="option.value"
          >
          </el-option>
        </el-select>
        <el-date-picker
          v-if="item.type === 'date'"
          :editable="false"
          value-format="yyyy-MM-dd HH:mm:ss"
          v-model="date"
          type="datetimerange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </div>
      <!-- </el-col>
    <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
        <div class="search-btn">
            <el-button type="primary" icon="el-icon-search" @click="searchData"
            >查询</el-button
            >
            <el-button size="large" icon="el-icon-refresh" @click="resetData">重置</el-button>
        </div>
    </el-col> -->
      <!-- </el-row> -->
    </el-form-item>
    <el-form-item>
      <div class="search-btn">
        <el-button type="primary" icon="el-icon-search" @click="searchData"
          >查询</el-button
        >
        <!-- <el-button icon="el-icon-refresh" @click="resetData">重置</el-button> -->
      </div>
    </el-form-item>
  </el-form>
</template>
<script>
import moment from "moment";
export default {
  // filterprops{
  //    filterItems=>Array
  //    filterChange=>func
  // }
  props: {
    filterProps: Object
  },
  data() {
    let { filterItems, onFilterChange, reSet } = this.filterProps;
    let filterParam = {},
      selectObj = {};
    filterItems.forEach(item => {
      // 处理时间选择框类型
      if (item.type === "date") {
        //如果是时间选择框
        filterParam["startTime"] = "";
        filterParam["endTime"] = "";
      } else if (item.type === "select") {
        //如果是下拉选择
        filterParam[item.id] = item.defaultValue ? item.defaultValue : "";
        selectObj[item.id] = item.options;
      } else {
        filterParam[`${item.id}`] = "";
      }
      if (item.defaultValue) {
        filterParam[`${item.id}`] = item.defaultValue;
      }
    });
    return {
      filterItems,
      filterParam,
      onFilterChange,
      selectObj,
      reSet,
      date: null
    };
  },
  activated() {
    let _this=this
    this.$nextTick(() => {
      _this._formatFilterItems();
    });
  },
  methods: {
    searchData() {
      let keysArr = [];
      for (let key in this.filterParam) {
        if (typeof this.filterParam[key] === "string") {
          if (this.filterParam[key].replace(/\s+/g, "") === "") {
            delete this.filterParam[key];
          }
        }
      }
      this.onFilterChange(this.filterParam);
    },
    resetData() {
      for (let key in this.filterParam) {
        this.filterParam[key] = "";
      }
      this.reSet();
    },
    _formatFilterItems() {
      if (!this.filterProps) return;
      let { filterItems, onFilterChange, reSet } = this.filterProps;
      let filterParam = {},
        selectObj = {};
      filterItems.forEach(item => {
        // 处理时间选择框类型
        if (item.type === "date") {
          //如果是时间选择框
          filterParam["startTime"] = "";
          filterParam["endTime"] = "";
        } else if (item.type === "select") {
          //如果是下拉选择
          filterParam[item.id] = item.defaultValue ? item.defaultValue : "";
          selectObj[item.id] = item.options;
        } else {
          filterParam[`${item.id}`] = "";
        }
        if (item.defaultValue) {
          filterParam[`${item.id}`] = item.defaultValue;
        }
      });
      //TODO
      this.filterItems = filterItems;
      this.filterParam = filterParam;
      this.onFilterChange = onFilterChange;
      this.selectObj = selectObj;
      this.reSet = reSet;
      this.date = null;
    }
  },
  watch: {
    date(newVal, oldVal) {
      if (newVal) {
        this["filterParam"]["startTime"] = newVal[0];
        this["filterParam"]["endTime"] = newVal[1];
      } else {
        this["filterParam"]["startTime"] = "";
        this["filterParam"]["endTime"] = "";
      }
    },
    filterItems(newVal, oldVal) {
      if (newVal) {
        let filterParam = {},
          selectObj = {};
        newVal.forEach(item => {
          // 处理时间选择框类型
          if (item.type === "date") {
            //如果是时间选择框
            filterParam["startTime"] = "";
            filterParam["endTime"] = "";
          } else if (item.type === "select") {
            //如果是下拉选择
            filterParam[item.id] = "";
            selectObj[item.id] = item.options;
          } else {
            filterParam[`${item.id}`] = "";
          }
        });
        this.filterItems = newVal;
        this.filterParam = filterParam;
        this.selectObj = selectObj;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.el-row {
  margin: -20px 0 20px;
  ::v-deep {
    .el-date-editor.el-range-input {
      width: 40% !important;
    }
  }
  .filter {
    display: flex;
    font-size: 16px;
    span {
      white-space: nowrap;
      display: flex;
      align-items: center;
      margin-right: 5px;
    }
  }
  .search-btn {
    display: flex;
  }
  .el-col {
    margin-top: 20px;
  }
}
</style>
